<template>
    <div class="baise" style="margin-top: 20px;">
        <div class="aside" :class="asideIndes == index?'active':''" v-for="(item,index) in asideList" :key="index" @click="tabs(item,index)">{{ item.name }}</div> 
    </div>
</template>

<script setup lang="ts" >
import router from '@/router';
import { defineAsyncComponent, onMounted, reactive, computed, ref } from 'vue';
import { Session } from '@/utils/storage'
import { useStore } from 'vuex';
const store = useStore();


const asideIndes = ref<number>(0);


// 定义 emit 事件
const emit = defineEmits<{
    (event: 'tabs', url: string): void;
}>();
// const asideList = reactive([
//     {
//         name: '子账号管理',
//         url:'/achievements'
//     },
//     {
//         name: '角色管理',
//         url: '/roleManage'
//     },
//     {
//         name: '部门管理',
//         url: '/department'
//     }
// ])
const props = defineProps({
    asideList: {
        type: Array,
        default:[]
    }
})

onMounted(() => {
    const t = Session.get('asideIndes')
    asideIndes.value = Session.get('asideIndes')? Session.get('asideIndes'):0
    console.log('fsdfsd',t)
})

const tabs = (item:any,i:number) => {
    console.log('打印',i)
    // router.push(item.url)
    emit('tabs', item.url);
    Session.set('asideIndes',i)
    asideIndes.value = i
}

// 页面加载时
onMounted(() => {

})


</script>

<style lang="scss" scoped>
.aside{
    font-family: PingFangSC-Regular, PingFang SC;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    border-radius: 4px;
    position: relative;
    color: #4e596a;
    background-color: #fff;
    vertical-align: middle;
    cursor: pointer;
    width: 120px;
    margin: 0 auto;
    margin-top: 5px;
    text-align: center;
}
.aside:hover{
    background-color: rgba(112, 82, 255, .08);
}
.active{
    color: #7052ff;
    background-color: rgba(112, 82, 255, .08);
    border-radius: 5px;
    text-align: center;
    position: relative;
}
.active::before{
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 11px;
    width: 2px;
    height: 15px;
    border-radius: 5px;
    background: #7052ff;
}
</style>